<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo5</title>
</head>
<br>
    <!--input标签
        type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
        name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一.
        value: input 中的默认值.
        <form action="test.html">
        ... [form 的内容]
        </form>
        checked: 默认被选中. (用于单选按钮和多选按钮)
        maxlength: 设定最大长度.
  -->

        <!-- 文本框 -->
        <input type="text"><br/>

        <!-- 密码框 -->
         <input type="password"><br/>

         <!-- 单选框 -->
        <input type="radio" name="sex">男
        <input type="radio" name="sex" checked="checked">女<br/>

        <!-- 复选框 -->
         <input type="checkbox"> 吃饭  <input type="checkbox">睡觉 <input type="checkbox">打游戏<br/>

         <!-- 普通按钮 -->
        <input type="button" value="按钮"><br/>

        <!-- 提交按钮 -->
         <form action="https://blog.csdn.net/wk200411?spm=1000.2115.3001.5343">
            <input type="test" name="username">
            <input type="submit" value="提交">
         </form>

         <!-- 选择文件 -->
        <input type="file"><br/>


        <!-- label 标签 -->
         <!-- 搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验,因为此时可以点击文字就能够勾选了
          for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的) -->

          <label for="male">男</label> <input id="male" type="radio" name="sex">

          
          <!-- select 标签,下拉菜单 -->
           <!-- option 中定义 selected="selected" 表示默认选中 -->
         <select>
            <option>北京</option>
            <option selected="selected">天津</option>
         </select>


         <p>
            <select>
                <option>--请选择年份--</option>
                <option>1991</option>
                <option>1992</option>
                <option>1993</option>
                <option>1994</option>
            </select>
         </p>


         <!-- textarea 标签 -->
          <textarea row="3" col="50"></textarea></br>

          <!-- 无语义标签: div & span
                div 标签, division 的缩写, 含义是 分割
                span 标签, 含义是跨度 
            -->

            <!-- 就是两个盒子. 用于网页布局
            div 是独占一行的, 是一个大盒子.
            span 不独占一行, 是一个小盒子. -->
            <div>
                <span>java高手</span>
                <span>java高手</span>
                <span>java高手</span>
            </div>

            <div>
                <span>前端学习</span>
                <span>前端学习</span>
                <span>前端学习</span>
            </div>
            




            <a href = "https://images0.cnblogs.com/blog/130623/201407/300958475557219.png" target="_blank">
                <img src="白黑.jpg" alt="" title="帅照" >
            </a>
         
</body>
</html>